<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层(就是DOM)-->
<div id="app3">
    <h2>当前计数:{{counter}}</h2>
    <!--    简单操作直接处理属性-->
    <button onclick="app.$data.counter++">+</button>
    <button v-on:click="counter--">-</button>

    <!--    复杂操作需要定义函数处理(语法糖就是简写而已)-->
    <button v-on:click="myadd2">+2</button>
    <button @click="mysub2">-2</button>
</div>

<!--viewModel层 vue处理-->
<script src="../../js/vue.js"></script>

<!--model层-->
<script>
    //https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
    const app = new Vue({
        el: "#app3",//定义view(挂载元素)
        data: {//定义数据属性
            counter: 0
        },
        methods: {//定义函数属性
            myadd2: function () {
                console.log("add method-----");
                app.$data.counter = app.$data.counter + 2
            },
            mysub2: function () {
                console.log("sub method-----");
                this.counter = this.counter - 2
            }
        }
    })
</script>

</body>
</html>